<template>
  <section class="course-section">
    <header class="course-section__header">
      <h2>{{ title }}</h2>
      <p>{{ subtitle }}</p>
    </header>
    <div class="course-section__grid course-section__grid--instructors">
      <article
        class="instructor-card"
        v-for="instructor in instructors"
        :key="instructor.id"
        role="button"
        tabindex="0"
        @click="emit('instructor-select', instructor.id)"
        @keyup.enter="emit('instructor-select', instructor.id)"
        @keyup.space.prevent="emit('instructor-select', instructor.id)"
      >
        <img class="instructor-card__avatar" :src="instructor.avatar" :alt="instructor.name" loading="lazy" />
        <h3>{{ instructor.name }}</h3>
        <p class="instructor-card__title">{{ instructor.title }}</p>
        <p class="instructor-card__desc">{{ instructor.description }}</p>
        <span class="instructor-card__course">{{ instructor.courseSummary }}</span>
      </article>
    </div>
  </section>
</template>

<script setup lang="ts">
import { toRefs } from 'vue'
import type { InstructorHighlight } from '../../types/course/Course.ts'

defineOptions({
  name: 'CourseInstructorSection',
})

const emit = defineEmits<{
  (e: 'instructor-select', instructorId: string): void
}>()

const props = defineProps<{
  title: string
  subtitle: string
  instructors: InstructorHighlight[]
}>()

const { title, subtitle, instructors } = toRefs(props)
</script>

<style scoped>
.course-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.course-section__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.course-section__header h2 {
  font-size: 28px;
  font-weight: 700;
}

.course-section__header p {
  font-size: 16px;
  color: #6b7280;
}

.course-section__grid {
  display: grid;
  gap: 24px;
}

.course-section__grid--instructors {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.instructor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 32px 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  outline: none;
}

.instructor-card__avatar {
  width: 112px;
  height: 112px;
  border-radius: 28px;
  object-fit: cover;
}

.instructor-card__title {
  font-weight: 600;
  color: #4b5563;
}

.instructor-card__desc {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}

.instructor-card__course {
  font-size: 14px;
  color: #3c65f5;
  font-weight: 600;
}

.instructor-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(60, 101, 245, 0.3);
}
</style>
